<!--
使用样例：<k-line :coverPrecent='coverPrecent' :coverText='' :data='data'/>
coverPrecent: 右侧空白区域的百分比， Number， 传0表示没有空白区域
coverText: 右侧的图标区域的文字内容，如果内容不为空则表示为模板股票
-->
<template>
  <div :class='$style.wrap + " chart-box"'>
    <div v-if='loading' :class='$style.tip'>...</div>
    <div v-if='coverPrecent > 0 && !loading' 
        :class="$style.cover + ' ' + $style.after" 
        :style='{width: coverPrecent + "%"}' 
        v-text='coverText'
        @click='toDetail'></div>
    <div ref='chart' :class="$style.chart" :style='{width: chartWidth + "px", visibility: loading ? "hidden" : ""}'></div>
    <div :class='$style.stockName' v-text='stock.STOCK_NAME' :style='{width: (100 - coverPrecent) + "%"}'></div>
  </div>
</template>

<style lang="less" module>
.wrap{
  display: flex;
  justify-content: center;
  height: 240px;
  position: relative;
  text-align: center;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  .tip{
    width: 100%;
    position: absolute;
    top: 44%;
    color: #999;
    z-index: 99;
  }
  .chart{
    flex: 1;
    height: 100%;
  }
  .cover{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    line-height: 240px;
    color: #999;
    // box-shadow: -8px 0px 20px -1px #ddd;
  }
  .after{
    z-index: 2;
  }
  .stockName{
    position: absolute;
    bottom: 0;
    left: 0;
    color: #999;
    font-size: 20px;
  }
}

</style>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/candlestick'
import kLineOption from './klineOption'
import CommonUtil from '@/common/common.util'
import filterMarketCode from '@/filters/filterMarketCode'
export default {
  filters: { filterMarketCode },
  props: {
    coverPrecent: {
      type: Number,
      default: 50
    },
    coverText: {
      type: String,
      default: ''
    },
    stock: {
      type: Object,
      default: function () {
        return {
          STOCK_CODE: '',
          STOCK_NAME: '',
          MARKET_CODE: '',
          K_LIST: []
        }
      }
    }
  },
  data () {
    return {
      chart: null,
      chartWidth: 0,
      splitData: false,
      loading: false,
      isTemplate: false,
      dataURL: '',
      isShare: false
    }
  },
  mounted () {
    this.isTemplate = this.coverText.length > 0
    this.loading = true
    setTimeout(() => { this.initChart() }, 15)
    this.dataURL = CommonUtil.getUrlParam('url') || this.$route.query.url
    if (this.dataURL && this.dataURL !== '') this.isShare = true
  },
  methods: {
    initChart () {
      this.chartWidth = window.innerWidth
      this.chart = echarts.init(this.$refs.chart)
      if (this.coverText.length <= 0) {
        this.splitData = true
      }
      this.chart.setOption(kLineOption(this.stock, this.splitData, 100 - this.coverPrecent))
      this.loading = false
    },
    toDetail () {
      if (this.coverText !== '后续走势如何?' || this.isShare) return
      this.$router.push({path: '/stock', query: {stockName: this.stock.STOCK_NAME, stockCode: filterMarketCode(this.stock.MARKET_CODE) + this.stock.STOCK_CODE}})
    }
  },
  beforeDestroy () {
    this.chart = null
  }
}
</script>
